{% extends "base-left.html" %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
{% endblock %}

{% block content %}

    <!-- Main content -->
  <section class="content">
    <div id="devlist">
        <div class="box box-primary" id="liebiao">
            <div class="box-header">
                <div class="btn-group pull-left">
                    <button type="button" id="btnCreate" class="btn btn-default">
                        <i class="glyphicon glyphicon-plus">新增</i>
                    </button>
                </div>
                <div class="btn-group pull-left">&nbsp</div>

                <div class="btn-group pull-left">
                    <button type="button" id="btnDelete" class="btn btn-default">
                        <i class="glyphicon glyphicon-trash">删除</i>
                    </button>
                </div>
            </div>

            <div class="box-body">
                <table id="dtbList" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr valign="middle">
                             <th><input type="checkbox" id="checkAll"></th>
                             <th>ID</th>
                             <th>名称</th>
                             <th>类别</th>
                             <th>所属</th>
                             <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <br><br>
            </div>

        </div>
    </div>

  </section>

    <!-- /.content -->

{% endblock %}


{% block javascripts %}
    <script src="{% static 'js/plugins/layer/layer.js' %}"></script>
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>

    <script type="text/javascript">
        $(function () {
            $("#SYSTEM-BASIC").addClass('active');
            $("#SYSTEM-BASIC-STRUCTURE").addClass('active');
        });
    </script>

    <script type="text/javascript">
        var oDataTable=null;
        $(function () {
            oDataTable=initTable();
            function initTable() {
                var oTable=$('#dtbList').DataTable($.extend(true,{},
                    DATATABLES_CONSTANT.DATA_TABLES.DEFAULT_OPTION,{
                    ajax:{
                        'url':'{% url 'system:basic-structure-list' %}',
                        //通过ajax请求数据
                    },
                    columns:[
                        DATATABLES_CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
                        {
                            data:'id',
                            width:'5%',
                        },
                        {
                            data:'name',
                            width:'20%',
                        },
                        {
                            data:'type',
                            render:function (data,type,row,meta) {
                                if(data == 'unit'){
                                    return "单位";
                                }else if (data == 'department'){
                                    return '部门';
                                }
                            }
                        },
                        {
                            data:'parent__name',
                        },
                        {
                            data:'id',
                            width:"12%",
                            bSortable:'false',
                            render:function (data,type,row,meta) {
                                var ret="";
                                var ret="<button title='详情-编辑' onclick='doUpdate("
                                    +data +")'><i class='glyphicon glyphicon-pencil'></i></button>";
                                ret=ret+"<button title='关联用户' onclick='doAddUser("
                                    +data +")'><i class='glyphicon glyphicon-user'></i></button>";
                                ret=ret+"<button title='删除' onclick='doDelete("
                                    +data +")'><i class='glyphicon glyphicon-trash'></i></button>";
                                return ret;
                            }
                        }
                    ],
                    'order':[
                        [1,'id']
                    ],
                }));
                return oTable
            }
        });
    </script>

    <script type="text/javascript">

        $('#btnCreate').click(function () {
            layer.open({
                type:2,
                title:'新增',
                shadeClose: false,
                maxmin:true,
                area:['800px','400px'],
                content:"{% url 'system:basic-structure-create' %}",
                end:function () {
                    //新增内容,弹窗关闭后刷新oDatable
                    oDataTable.ajax.reload();
                }
            });
        });

        //全选
       $('#checkAll').on("click",function () {
          if ($(this).prop('checked')===true){
              $("input[name='checkList']").prop("checked",$(this).prop("checked"));
              $("#example tbody tr").addClass('selected');
          } else {
              $("input[name='checkList']").prop("checked",false);
              $("#example tbody tr").removeClass('selected');
          }
       });

        //批量删除
        $("#btnDelete").click(function () {
            if($("input[name='checkList']:checked").length == 0 ){
                layer.msg('请选择要删除的记录');
                return;
            }

            var arrID=new Array();
            $("input[name='checkList']:checked").each(function () {
                //alert($(this).val());
                arrID.push($(this).val());
            });

            sID=arrID.join(',');

            layer.alert('确定要删除吗？',{
                title:'提示',
                icon:3,//0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
                time:0,//不自动关闭
                btn:['YES','NO'],
                yes:function (index) {
                    layer.close(index);
                    $.ajax({
                        type:'POST',
                        url:"{% url 'system:basic-structure-delete' %}",
                        data:{'id':sID,csrfmiddlewaretoken:'{{ csrf_token }}'},
                        cache:false,
                        success: function (msg) {
                            if(msg.result){
                                layer.alert('操作成功',{icon:1});
                                oDataTable.ajax.reload();
                            } else{
                                //alert(msg.message);
                                layer.alert('操作失败',{icon:2});
                            }
                            return;
                        }
                    });

                }
            });
        });

        //删除单个数据
        function doDelete(id) {
            layer.alert('确定删除吗',{
                title:'提示',
                icon:3,//0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
                time:0,//不自动关闭
                btn:['YES','NO'],
                yes:function (index) {
                    layer.close(index);
                    $.ajax({
                        type:'POST',
                        url:"{% url 'system:basic-structure-delete' %}",
                        data:{'id':id,csrfmiddlewaretoken:'{{ csrf_token }}'},
                        cache:false,
                        success: function (msg) {
                            if (msg.result) {
                                layer.alert('删除成功', {icon: 1});
                                oDataTable.ajax.reload();
                            } else {
                                //alert(msg.message);
                                layer.alert('删除失败', {icon: 2});
                            }
                            return ;
                        }
                   });
                }
            });
        }




        function doUpdate(id) {
             layer.open({
                type:2,
                title:'编辑',
                shadeClose: false,
                maxmin:true,
                area:['800px','400px'],
                content:["{% url 'system:basic-structure-create' %}"+"?id="+id,'no'],
                end: function () {
                    //新增内容,弹窗关闭后刷新oDatable
                    oDataTable.ajax.reload();
                }
            });
        }

        //关联用户的操作
        function doAddUser(id) {
            layer.open({
                type:2,
                title:"编辑：{{ structure.name }}",
                shadeClose:false,
                maxmin:true,
                area:['800px','600px'],
                content:["{% url 'system:basic-structure-add_user' %}"+'?id='+id,'no'],
                end:function () {
                    windows.location.reload();
                }
            });
        }

    </script>
{% endblock %}
